import { Link, FileAdded } from '@brillout/docpress'

Your <Link href="/config#files">`+` files</Link> should have only one export:

```ts
// pages/index/+Page.ts

// ✅ Main export
// @detype-uncomment export { Page }

// ❌ Avoid side exports
// @detype-uncomment export { SomeSharedComponent }
```


### Why

The problem is that it often causes unnecessary code to be loaded on the client-side. For example:

```ts
// pages/index/+Page.ts

// This CSS is loaded every time SomeSharedComponent is imported
import './landing-page.css'

export function SomeSharedComponent() {
  // ...
}
```
```ts
// pages/about/+Page.ts

// ❌ Bad: the /about page loads landing-page.css, which usually isn't what you want
import { SomeSharedComponent } from '../index/+Page'
```

> Vike does code-splitting: when the user navigates to `/about`, only the JavaScript needed for `/about` is loaded. This also applies server-side with certain edge deployment providers.


### Solution

Move shared code into a separate file:

<FileAdded>
```ts
// components/SomeSharedComponent.ts

export function SomeSharedComponent() {
  // ...
}
```
</FileAdded>
```ts
// pages/about/+Page.ts

import { SomeSharedComponent } from '../index/+Page'// [!code --]
// @detype-replace SomeSharedComponent_ SomeSharedComponent
import { SomeSharedComponent_ } from '../../components/SomeSharedComponent'// [!code ++]
```
```ts
// pages/index/+Page.ts

import './landing-page.css'
import { SomeSharedComponent } from '../../components/SomeSharedComponent'// [!code ++]

// @detype-replace SomeSharedComponent_ SomeSharedComponent
export function SomeSharedComponent_() {// [!code --]
  // ...// [!code --]
}// [!code --]
```
